<template>
  <div>
    <header>
      <div class="header_left">
        <a href="#">登陆 |</a>
        <a href="#">注册</a>
        <a href="#">我的订单</a>
        <a href="#">我的收藏</a>
        <div class="gwc iconfont icon-gouwuchekong">
          购物车
          <span>0</span>
        </div>
      </div>
      <div class="dh">
        <img src="img/1.png" class="log" />
        <div class="hedaer_bottom">
          <van-tabs class="sy1">
            <van-tab title="首页" to="/sy"/>
            <van-tab title="全部商品" to="/sp"/>
            <van-tab title="关于我们" to="/wm"/>
          </van-tabs>
          <router-view></router-view>
        </div>
        <van-search placeholder="请输入搜索关键词" input-align="center" />
      </div>
    </header>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  mounted() {
  },
  methods: {
    
  },
  components: {}
};
</script>
<style scoped>
header {
  width: 100%;
  height: 50px;
  background: #3d3d3d;
  line-height: 40px;
}
.header_left {
  margin-left: 900px;
  display: flex;
}
a {
  color: #b0b0b0;
  margin: 10px;
  font-size: 14px;
}
a:hover {
  color: white;
}
.gwc {
  height: 50px;
  color: #b0b0b0;
  font-size: 14px;
}
.gwc:hover {
  background: white;
}
.header_bottom {
  width: 100%;
  height: 60px;
  border: 1px solid;
}
.dh {
  display: flex;
  justify-content: space-around;
}
.log {
  width: 190px;
  height: 60px;
}
.sy {
  margin-left: 100px;
}
.el-tabs {
  height: 100px;
}
.sy1{
  width: 1000px;
  height: 100%;
}

</style>
